<template>
  <h2>组合式api</h2>

  <div>
    <button @click="minus">-</button>
    <span>{{ count }}</span>
    <button @click="add">+</button>
    <div>doubleCount: {{ doubleCount }}</div>
  </div>

  <hr />

  <input type="text" v-model="textValue" />
  <button @click="sbm">提交</button>

  <ul>
    <li v-for="item in list" :key="item.id">
      {{ item.name }} - <button @click="remove(item.id)">删除</button>
    </li>
  </ul>

  <hr />

  <h3>编程式导航</h3>
  <button @click="jump">跳转到provide</button>

  <h3>vuex</h3>
  <div>msg: {{ msg }}</div>
  <button @click="change">change</button>
</template>

<script>
// 如果需要响应式，要从vue里面解构ref函数
import { ref, computed, onMounted } from "vue";
import useCounter from "@/hooks/useCounter";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";

export default {
  // 组合式api，只有一个选项是setup函数
  // setup是一个组合式api的入口，同时也是生命周期
  // 甚至没有this
  setup() {
    const [count, minus, add, doubleCount] = useCounter();

    const [textValue, list, sbm, remove] = useList();
    // 每一个setup最后都需要return一个对象
    // 只有对象里面的东西才能被template使用

    // useRouter只能在setup的顶层进行调用
    // router表示路由实例
    const router = useRouter();
    const route = useRoute();

    const jump = () => {
      console.log(route);
      router.push("/provide");
    };

    // 仓库的数据需要用计算属性来接受
    // 如果使用了setup，辅助函数不能用了
    const store = useStore();
    // const msg = ref(store.state.msg);
    const msg = computed(() => {
      return store.state.msg;
    });
    const change = () => {
      store.commit("change");
    };

    return {
      count,
      minus,
      add,
      doubleCount,
      list,
      textValue,
      sbm,
      remove,
      jump,
      msg,
      change,
    };
  },
};

const useList = () => {
  const textValue = ref("");
  const list = ref([]);
  const sbm = () => {
    list.value.push({ id: new Date().getTime(), name: textValue.value });
    textValue.value = "";
  };
  const remove = (id) => {
    list.value = list.value.filter((item) => item.id !== id);
  };
  onMounted(() => {
    setTimeout(() => {
      list.value = [
        {
          name: "zhangsan",
          id: 1,
        },
        {
          name: "lisi",
          id: 2,
        },
      ];
    }, 500);
  });
  return [textValue, list, sbm, remove];
};

// export default {
//   data() {
//     return {
//       count: 1,
//       textValue: "",
//       list: [],
//     };
//   },
//   methods: {
//     add() {
//       this.count++;
//     },
//     minus() {
//       this.count--;
//     },
//     sbm() {
//       this.list.push({ id: new Date().getTime(), name: this.textValue });
//       this.textValue = "";
//     },
//     remove(id) {
//       this.list = this.list.filter((item) => item.id !== id);
//     },
//   },
//   computed: {
//     doubleCount() {
//       return this.count * 2;
//     },
//   },
//   mounted() {
//     setTimeout(() => {
//       this.list = [
//         {
//           name: "zhangsan",
//           id: 1,
//         },
//         {
//           name: "lisi",
//           id: 2,
//         },
//       ];
//     }, 500);
//   },
// };
</script>
